<template>
	<div>
		<!-- 搜索框 -->
		<div style="padding: 10px 0; border: rgb(47,144,185,0.2) solid 1px; box-shadow: 1px 1px 3px #ccc;">
			<el-input style=" width: 15%; margin-left: 10px;" placeholder="控制器方法搜索" prefix-icon="el-icon-info" v-model="conmethod">
			</el-input>
			<el-input style=" width: 15%; margin-left: 15px;" placeholder="操作用户搜索" prefix-icon="el-icon-user-solid"
				v-model="unumber"></el-input>
			<el-button round style="margin-left: 20px;" type="success" @click="load">搜索</el-button>
			<el-button round class="ml-5" type="warning" @click="reset">重置</el-button>
			<el-button type="danger" round @click="delBetch">批量删除</el-button>
			<el-button type="primary" round @click="exportD">导出日志</el-button>
		</div>

		<!-- 按钮行 -->
		<div style="margin: 10px 0 ;">

			<!-- TODO 导入导出文件上传 -->
		</div>

		<el-table :data="tableData" border style="width: 100%;" :header-cell-class-name="'headerBg'"
			@selection-change="handleSelectionChange" tooltip-effect="dark">
			<!-- 多选框 -->
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="id" label="ID" width="60"></el-table-column>
			<el-table-column prop="unumber" label="用户账号" width="100"></el-table-column>
			<el-table-column prop="createDate" label="日志创建时间" width="120"></el-table-column>
			<el-table-column prop="conmethod" label="控制器方法" width="100"></el-table-column>
			<el-table-column prop="method" label="请求方法" width="100"></el-table-column>
			<el-table-column prop="params" label="请求参数" width="250"></el-table-column>
			<el-table-column prop="address" label="访问路径" width="140"></el-table-column>
			<el-table-column prop="host" label="访问主机" width="100"></el-table-column>
			<el-table-column prop="status" label="状态" width="60">
				<template scope="scope">
					<span v-if="scope.row.status === '正常'" style="color: green">正常</span>
					<span v-else="scope.row.status === '异常'" style="color: red">异常</span>
				</template>
			</el-table-column>

			<!-- 编辑与删除按键 -->
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-popconfirm style="margin-left: 15px;" confirm-button-text='确定' cancel-button-text='再想想'
						icon="el-icon-info" icon-color="red" title="确定删除此日志" @confirm="handleDelete(scope.row.id)">
						<el-button type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页表 -->
		<div style="padding: 10px 0; text-align: center;">
			<el-pagination :page-sizes="[9 ,18, 27, 36]" :page-size="pageSize" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Dialy",
		data() {
			return {
				// 多选框
				multipleSelection: [],
				tableData: [],
				// 分页查询数据
				pageSize: 9,
				pageNum: 1,
				total: 0,
				role: '',
				// 搜索框数据
				unumber: '',
				conmethod: ''
			}
		},
		methods: {
			// 勾选用户
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},

			//批量删除弹窗
			delBetch() {
				if (this.role != "ROLE_SUPERADMIN") {
					this.$message.error("权限不足，请联系管理员!");
				} else {
					if (this.multipleSelection != '') {
						this.$confirm('此操作将永久删除这些日志, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
							center: true
						}).then(() => {
							this.delChose()
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						});
					} else {
						this.$message.error("未选择需要删除日志!");
					}
				}
			},

			// 批量删除用户
			delChose() {
				let ids = this.multipleSelection.map(v => v.id) // 将对象数组变为ID数组
				this.request.post("/dialy/del/batch", ids).then(res => {
					if (res.code != 500) {
						this.$message.success(res.message)
						this.load()
					} else {
						this.$message.success(res.message)
					}
				})
			},

			// 分页查询  页码
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.load()
			},

			// 分页查询  单页数量
			handleCurrentChange(pageNum) {
				this.pageNum = pageNum
				this.load()
			},

			// 重置输入框
			reset() {
				this.conmethod = '',
					this.unumber = '',
					this.load()
			},


			// 删除信息
			handleDelete(id) {
				this.request.delete("/dialy/" + id).then(res => {
					if (res.code != 500) {
						this.$message.success(res.message)
						this.load()
					} else {
						this.$message.success(res.message)
					}
				})
			},

			// 封装分页查询请求
			load() {
				this.request.get('/dialy/page', {
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						conmethod: this.conmethod,
						unumber: this.unumber
					}
				}).then(res => {
					console.log(res);
					this.tableData = res.obj.records
					this.total = res.obj.total
				})
			},

			// 导出数据
			exportD() {
				if (this.role != "ROLE_SUPERADMIN") {
					this.$message.error("权限不足，请联系管理员!");
				} else {
					window.open("http://localhost:9090/dialy/exportExcel")
				}
			},
			getUser() {
				let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : ""
				this.role = username.role;
			},

		},
		created() {
			// 请求分页查询
			this.load();
			this.getUser();
		}
	}
</script>

<style>
	.headerBg {
		background: #a4cab6 !important;
		color: #000;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 25px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}
</style>
